- expanded = integration_expanded?('kroki_')

= render ::Layouts::SettingsBlockComponent.new(_('Kroki'),
  id: 'js-kroki-settings',
  expanded: expanded) do |c|
  - c.with_description do
    = _('Users can render diagrams in AsciiDoc, Markdown, reStructuredText, and Textile documents using Kroki.')
    = link_to _('Learn more.'), help_page_path('administration/integration/kroki.md'), target: '_blank', rel: 'noopener noreferrer'
  - c.with_body do
    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-kroki-settings'), html: { class: 'fieldset-form', id: 'kroki-settings' } do |f|
      = form_errors(@application_setting) if expanded

      %fieldset
        .form-group
          = f.gitlab_ui_checkbox_component :kroki_enabled,
            _('Enable Kroki')
        .form-group
          = f.label :kroki_url, _('Kroki URL'), class: 'label-bold'
          = f.text_field :kroki_url, class: 'form-control gl-form-input'
          .form-text.gl-text-subtle
            = _('The Kroki server that will be used to generate diagrams.')
        .form-group
          = f.label :kroki_formats, _('Additional diagram formats'), class: 'label-bold'
          .form-text.gl-text-subtle
            - container_link_url = 'https://docs.kroki.io/kroki/setup/install/#images'
            - container_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: container_link_url }
            = html_escape(_('To use the additional formats, you must start the required %{container_link_start}companion containers%{container_link_end}.')) % { container_link_start: container_link_start, container_link_end: '</a>'.html_safe }
        - kroki_available_formats.each do |format|
          = f.gitlab_ui_checkbox_component format[:name], format[:label]

      = f.submit _('Save changes'), pajamas_button: true
